<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8"/>
    <title>角色</title>
    <meta name="description" content="overview & stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="static/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="static/css/ace.min.css"/>
    <link rel="stylesheet" href="static/css/ace-responsive.min.css"/>
    <link rel="stylesheet" href="static/css/ace-skins.min.css"/>
    <script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
    <!--提示框-->
    <script type="text/javascript" src="static/js/jquery.tips.js"></script>
</head>

<script type="text/javascript">
    $(function () {
        top.hangge();

        $("#level").change(function () {
            var level = $(this).val();
            if (level == 0) {
                $(".channelControl").css("display", "none");
                $(".channelControl").find(":input").attr("disabled", true);
            } else {
                $(".channelControl").css("display", "block");
                $(".channelControl").find(":input").attr("disabled", false);
            }
        });
    });

    //保存
    function save() {
        var name = $("#name").val();
        if (name == "") {
            $("#name").tips({
                side: 3,
                msg: '请输入角色名称',
                bg: '#AE81FF',
                time: 2
            });
            $("#name").focus();
            return false;
        }
        if ($("#desc").val() == "") {
            $("#desc").tips({
                side: 3,
                msg: '请输入权限描述',
                bg: '#AE81FF',
                time: 2
            });
            $("#desc").focus();
            return false;
        }
        var lev = $("#level").val();
        if (lev == "") {
            $("#level").tips({
                side: 3,
                msg: '请选择级别',
                bg: '#AE81FF',
                time: 2
            });
            $("#level").focus();
            return false;
        } else if (lev > 0) {
            var userType = '${user.type}';
            if (userType == 0) {
                if ($("#channelCode").val() == "") {
                    $("#channelCode").tips({
                        side: 3,
                        msg: '请选择渠道',
                        bg: '#AE81FF',
                        time: 2
                    });
                    $("#channelCode").focus();
                    return false;
                }
            }
        }

        var flag = false;
        var checklist = document.getElementsByName("menuIds");
        for (var i = 0; i < checklist.length; i++) {
            if (checklist[i].checked == 1) {
                flag = true;
            }
        }
        if (!flag) {
            $("#zcheckbox").tips({
                side: 3,
                msg: '请选择菜单',
                bg: '#AE81FF',
                time: 2
            });
            $("#zcheckbox").focus();
            return false;
        }
        $("#menuForm").submit();
        $("#zhongxin").hide();
        $("#zhongxin2").show();

    }

    //全选 （是/否）
    function selectAll() {
        var checklist = document.getElementsByName("menuIds");
        if (document.getElementById("zcheckbox").checked) {
            for (var i = 0; i < checklist.length; i++) {
                checklist[i].checked = 1;
            }
        } else {
            for (var j = 0; j < checklist.length; j++) {
                checklist[j].checked = 0;
            }
        }
    }

    function selectSub(id) {
        var ch = $("#" + id).attr("checked");
        //子菜单全选
        var o = $("." + id).find("input");
        if (o) {
            for (var i = 0; i < o.length; i++) {
                o[i].checked = ch;
            }
        }
        //上级菜单选中
        if (ch) {
            var pid = $("#" + id).attr("data-pid");
            while (pid) {
                $("#" + pid).attr("checked", true);
                pid = $("#" + pid).attr("data-pid");
            }
        }
    }

    function clickShow(obj, id) {
        console.log($("." + id).css('display') != "none")
        if ($("." + id).css('display') != "none") {
            $("." + id).css('display', 'none')
            $(obj).html("△")
        } else {
            $("." + id).css('display', 'block')
            $(obj).html("▽")
        }
    }
</script>

<body>
<form action="role/edit" name="menuForm" id="menuForm" method="post">
    <input type="hidden" name="id" id="id" value="${role.id}">
    <div id="zhongxin" class="zhongxin-cla">
        <table>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>角色名称：</span>
                    <input type="text" name="name" id="name" placeholder="角色名称" value="${role.name}" title="名称"/>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>权限描述：</span>
                    <textarea name="desc" id="desc" placeholder="权限描述" value="" title="描述"
                              rows="3">${role.desc}</textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <font color='red'>*</font>
                    <span>角色级别：</span>
                    <select class="input_txt" name="level" id="level" style="vertical-align:top;width: 150px;">
                        <c:if test="${user.type==0}">
                            <option value="0" <c:if test="${role.level == 0}">selected</c:if>>系统级</option>
                        </c:if>
                        <c:if test="${user.type==0 or empty user.channelArea or user.channelArea.level <= 1}">
                            <option value="1" <c:if test="${role.level == 1}">selected</c:if>>一级</option>
                        </c:if>
                        <c:if test="${user.type==0 or empty user.channelArea or user.channelArea.level <= 2}">
                            <option value="2" <c:if test="${role.level == 2}">selected</c:if>>二级</option>
                        </c:if>
                        <c:if test="${user.type==0 or empty user.channelArea or user.channelArea.level <= 3}">
                            <option value="3" <c:if test="${role.level == 3}">selected</c:if>>三级</option>
                        </c:if>
                        <c:if test="${user.type==0 or empty user.channelArea or user.channelArea.level <= 4}">
                            <option value="4" <c:if test="${role.level == 4}">selected</c:if>>四级</option>
                        </c:if>
                        <c:if test="${user.type==0 or empty user.channelArea or user.channelArea.level <= 5}">
                            <option value="5" <c:if test="${role.level == 5}">selected</c:if>>五级</option>
                        </c:if>
                    </select>
                </td>
            </tr>
            <c:if test="${user.type == 0}">
                <tr>
                    <td>
                        <div class="channelControl" <c:if test="${empty role.channelCode}">style="display: none"</c:if>>
                            <font color='red'>*</font>
                            <span>渠道选择：</span>
                            <select class="input_txt" name="channelCode" id="channelCode"
                                    style="vertical-align:top;width: 150px;">
                                <c:forEach items="${channels}" var="channel">
                                    <option value="${channel.channelCode}"
                                            <c:if test="${role.channelCode eq channel.channelCode}">selected</c:if>>${channel.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </td>
                </tr>
            </c:if>
            <tr>
                <td>
                    <div style="padding-left: 10px">
                        <font color='red'>*</font>
                        <span style="font-weight: bold">角色权限：</span>
                        <c:if test="${not empty menus}">
                                <span style="margin-left: 15px" onclick="selectAll()">
                                    <label>
                                        <input type="checkbox" id="zcheckbox"/>
                                        <span class="lbl">全选</span>
                                    </label>
                                </span>
                        </c:if>
                        <c:forEach items="${menus}" var="menu">
                                <span style="margin-left: 0px;">
									<div style="display: flex">
										<span style="margin-right: 15px;cursor: pointer"
                                              onclick="clickShow(this, '${menu.id}')">▽</span>
										<label onclick="selectSub('${menu.id}')">
											<input type="checkbox" name="menuIds" id="${menu.id}" value="${menu.id}"
                                                   <c:if test="${fn:contains(role.menuIds, menu.id)}">checked='checked'</c:if>/>
											<span class="lbl" style="font-weight: bold">${menu.name}</span>
										</label>
									</div>
									<%--二级菜单--%>
									<c:forEach items="${menu.subMenu}" var="menu1">
										<span class="${menu.id}" style="margin-left: 0px;">
											<div style="display: flex">
                                                <c:choose>
                                                    <c:when test="${empty menu1.subMenu}">
                                                        <label style="margin-left: 38px"
                                                               onclick="selectSub('${menu1.id}')">
                                                            <input type="checkbox" name="menuIds" id="${menu1.id}"
                                                                   data-pid="${menu1.pid}" value="${menu1.id}"
                                                                   <c:if test="${fn:contains(role.menuIds, menu1.id)}">checked='checked'</c:if>/>
                                                            <span class="lbl">${menu1.name}</span>
                                                        </label>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <span style="margin-right: 15px;cursor: pointer"
                                                              onclick="clickShow(this, '${menu1.id}')">▽</span>
                                                        <label style="margin-left: 15px"
                                                               onclick="selectSub('${menu1.id}')">
                                                            <input type="checkbox" name="menuIds" id="${menu1.id}"
                                                                   data-pid="${menu1.pid}" value="${menu1.id}"
                                                                   <c:if test="${fn:contains(role.menuIds, menu1.id)}">checked='checked'</c:if>/>
                                                            <span class="lbl">${menu1.name}</span>
                                                        </label>
                                                    </c:otherwise>
                                                </c:choose>
											</div>
											<%--三级菜单或按钮--%>
											<c:forEach items="${menu1.subMenu}" var="menu2">
												<span class="${menu1.id}" style="margin-left: 0px;">
													<div style="display: flex">
														<c:choose>
                                                            <c:when test="${menu2.type == 3 or empty menu2.subMenu}">
																<label style="margin-left: 55px"
                                                                       onclick="selectSub('${menu2.id}')">
																	<input type="checkbox" name="menuIds"
                                                                           id="${menu2.id}" data-pid="${menu2.pid}"
                                                                           value="${menu2.id}"
                                                                           <c:if test="${fn:contains(role.menuIds, menu2.id)}">checked='checked'</c:if>/>
																	<span class="lbl">${menu2.name}</span>
																</label>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <span style="margin-right: 15px;cursor: pointer"
                                                                      onclick="clickShow(this, '${menu2.id}')">▽</span>
                                                                <label style="margin-left: 30px"
                                                                       onclick="selectSub('${menu2.id}')">
																	<input type="checkbox" name="menuIds"
                                                                           id="${menu2.id}" data-pid="${menu2.pid}"
                                                                           value="${menu2.id}"
                                                                           <c:if test="${fn:contains(role.menuIds, menu2.id)}">checked='checked'</c:if>/>
																	<span class="lbl">${menu2.name}</span>
																</label>
                                                            </c:otherwise>
                                                        </c:choose>
													</div>
													<%--按钮--%>
													<c:forEach items="${menu2.subMenu}" var="menu3">
														<span class="${menu2.id}" style="margin-left: 0px;">
															<label style="margin-left: 70px"
                                                                   onclick="selectSub('${menu3.id}')">
																<input type="checkbox" name="menuIds" id="${menu3.id}"
                                                                       data-pid="${menu3.pid}" value="${menu3.id}"
                                                                       <c:if test="${fn:contains(role.menuIds, menu3.id)}">checked='checked'</c:if>/>
																<span class="lbl">${menu3.name}</span>
															</label>
														</span>
                                                    </c:forEach>
												</span>
                                            </c:forEach>
										</span>
                                    </c:forEach>
                                </span>
                        </c:forEach>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="text-align: center; padding-top: 10px;">
                    <a class="btn btn-mini btn-primary" onclick="save();">保存</a>
                    <a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
                </td>
            </tr>
        </table>
    </div>
    <div id="zhongxin2" class="center" style="display:none">
        <br/><br/><br/><img src="static/images/jiazai.gif"/><br/>
        <h4 class="lighter block green"></h4>
    </div>
</form>
</body>
</html>